<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="id">
        <!-- vmodel双向绑定 （value值和vmodel里面的数据绑定)
            mustache和vbind只是拿数据 改变不了服务器的数据 
            跟input标签一起使用 -->
        <input type="text" v-model="vModelMessage">

        <!-- vmodel原理 
            vblind实时拿到服务器的数据
            输入事件拿到目标元素对应的值传给服务器
        -->
        <input type="text" :value="vModelMessage" @input="changeDate" >
        <!-- 原理写法2 -->
        <input type="text" :value="vModelMessage" @input="vModelMessage = $event.target.value" >

    
        这里显示的是后台的值{{vModelMessage}}
    </div>
    <script src="../../vue.js"></script>
    <script>
        const vueApp = new Vue({
            el: '#id',
            data: {
                vModelMessage: 'helloVmodel',
            },
            methods: {
                // 直接方法名默认传的是一个事件对象
                changeDate(event){
                    console.log(event);
                    //拿到对应元素的值
                    this.vModelMessage = event.target.value;
                }
            }
              
        })
    </script>


</body>

</html>